<script setup lang="tsx" name="XtxTabs">
import { provide, useSlots, toRefs, VNode, ref } from 'vue'
/* const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
}) */
// 使用ts版本并指定默认值 接收父组件传递的数据 也会有响应式数据类型的问题
const { modelValue = '' } = defineProps<{
  modelValue: string
}>()
// 将modelValue处理成响应式的数据
const activeName = ref(modelValue)

const emit = defineEmits<{
  (e: 'update:modelValue', v: string): void
  (e: 'tabClick', tab: VNode, index: number): void
}>()
// console.log(useSlots()) // 获取到插槽列表
const panesSource = useSlots()?.default?.() // 获取默认插槽的多个面板(5个虚拟dom存在一个数组中了)
// console.log(panesSource)
const panes: any = []
panesSource?.forEach((item: any) => {
  if (item?.type?.name === 'XtxTabsPane') {
    panes.push(item)
  } else {
    if (item.children.length > 0) {
      item.children.forEach((subItem: any) => {
        panes.push(subItem)
      })
    }
  }
})
const clickFn = (item: any, index: number) => {
  // console.log(item)
  // 子传父,将点击的这一项的name字段同步给父组件
  emit('update:modelValue', item?.props?.name)
  emit('tabClick', item, index)
  // 点击的时候赋值一次
  activeName.value = item?.props?.name
}

provide('activeName', activeName)

const Vnode = () => {
  const navs = (
    <nav>
      {
        panes?.map((item: any, index: number) => {
          return <a href="javascript:;" onClick={() => clickFn(item, index)} class={{ active: modelValue === item?.props?.name }}>{item?.props?.label}</a>
        })
      }
    </nav>
  )
  return (
    <div class="xtx-tabs">
      {[navs, panes]}
      {/* */}
    </div>)
}
</script>

<template>
  <Vnode></Vnode>
</template>

<style lang="less">
.xtx-tabs {
  background: #fff;

  >nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;

    >a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;

      &.active {
        border-top: 2px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
      }
    }
  }
}
</style>